<template>
  <div class="realTime-alarms">
    <div class="realTime-table-a">
      <ET :height="620" :data="listData" />
    </div>
  </div>
</template>

<script setup lang="ts">
import emits from "@/utils/emits";
import { ref, onMounted, toRefs, watch, onUnmounted } from "vue";
import { useIds } from "@/stores/screen/ids";
import { getAlertData, getAlertList } from "@/api/alert";
const { getsessionStorage } = useIds();
const props = defineProps({
  handleStatus: {
    type: String,
    default: "",
  },
  alertGroup: {
    type: String,
    default: "",
  },
});

const listData = ref([
  {
    alertGrade: 'ERROR',
    alertContent: '可燃气体浓度异常',
    latestAlertTime: '2024-03-20 10:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'INFO',
    alertContent: '可燃气体浓度异常',
    latestAlertTime: '2024-03-20 11:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '可燃气体浓度异常',
    latestAlertTime: '2024-03-20 12:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'ERROR',
    alertContent: '可燃气体浓度严重超标',
    latestAlertTime: '2024-03-20 13:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'INFO',
    alertContent: '可燃气体浓度严重超标',
    latestAlertTime: '2024-03-20 14:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '可燃气体浓度严重超标',
    latestAlertTime: '2024-03-20 15:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度异常',
    latestAlertTime: '2024-03-20 16:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度异常',
    latestAlertTime: '2024-03-20 17:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度异常',
    latestAlertTime: '2024-03-20 18:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度严重超标',
    latestAlertTime: '2024-03-20 19:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度严重超标',
    latestAlertTime: '2024-03-20 20:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度严重超标',
    latestAlertTime: '2024-03-20 21:25',
    handleStatus: '0',
  },
]);

const { handleStatus, alertGroup } = toRefs(props);
const loading = ref(true);
const getAllAlertData = async () => {
  loading.value = true;
  listData.value = [];
  var d = new Date();

  var yday = new Date();
  if (handleStatus.value == "1") {
    d.setTime(d.getTime() - 1 * 24 * 60 * 60 * 1000);
  } else {
    d.setTime(d.getTime() - 1 * 24 * 60 * 60 * 1000);
  }
  // d.setTime(d.getTime() - 48 * 60 * 60 * 1000);
  var date =
    d.getFullYear() +
    "-" +
    (d.getMonth() + 1).toString().padStart(2, "0") +
    "-" +
    d
      .getDate()
      .toString()
      .padStart(2, "0") +
    " 00:00:00";
  yday.setTime(yday.getTime() + 24 * 60 * 60 * 1000);
  var ydate =
    yday.getFullYear() +
    "-" +
    (yday.getMonth() + 1).toString().padStart(2, "0") +
    "-" +
    yday
      .getDate()
      .toString()
      .padStart(2, "0") +
    " 00:00:00";
  const data = {
    endTime: ydate,
    startTime: date,
    handleStatus: handleStatus.value,
    alertGrade: alertGroup.value,
    equipmentIds: getsessionStorage().split(","),
    onlyAI: true,
    // roleId:103
  };
  let newData = [];
  const response = await getAlertList(data);
  loading.value = false;
  if (response && response.data.length > 0) {
    let resData: [] = response.data;
    newData = resData.filter((item: any) => item.alertGrade != "INFO");
  }
  // 获取今日0点的时间戳
  var today = new Date();
  today.setHours(0, 0, 0, 0);

  // newData = newData.filter(
  //   (item: any) =>
  //     item.handleStatus == "0" ||
  //     new Date(item.latestAlertTime).getTime() > today.getTime()
  // );
  // 把所有handleStatus为0的放到最前面
  newData.sort((a: any, b: any) => {
    if (a.handleStatus == "0") {
      return 1;
    } else if (b.handleStatus == "0") {
      return 1;
    } else {
      return (
        new Date(b.latestAlertTime).getTime() -
        new Date(a.latestAlertTime).getTime()
      );
    }
  });
  return newData;
};

const getRealTime = async () => {
  // listData.value = await getAllAlertData();
};
// const listData = ref();
onMounted(() => {
  // getRealTime();
  // emits.on("ALERT_MESSAGE", getRealTime);
  // emits.on("HANDLE_MESSAGE", getRealTime);
  // emits.on("Handle_Detail", getRealTime);
});
onUnmounted(() => {
  // emits.off("ALERT_MESSAGE", getRealTime);
  // emits.off("HANDLE_MESSAGE", getRealTime);
  // emits.off("Handle_Detail", getRealTime);
});
// watch(
//   () => handleStatus.value,
//   async (newval) => {
//     listData.value = await getAllAlertData();
//   },
//   { immediate: true, deep: true }
// );
let arr = [
  {
    alertGrade: 'ERROR',
    alertContent: '可燃气体浓度异常',
    latestAlertTime: '2024-03-20 10:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'INFO',
    alertContent: '可燃气体浓度异常',
    latestAlertTime: '2024-03-20 11:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '可燃气体浓度异常',
    latestAlertTime: '2024-03-20 12:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'ERROR',
    alertContent: '可燃气体浓度严重超标',
    latestAlertTime: '2024-03-20 13:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'INFO',
    alertContent: '可燃气体浓度严重超标',
    latestAlertTime: '2024-03-20 14:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '可燃气体浓度严重超标',
    latestAlertTime: '2024-03-20 15:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度异常',
    latestAlertTime: '2024-03-20 16:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度异常',
    latestAlertTime: '2024-03-20 17:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度异常',
    latestAlertTime: '2024-03-20 18:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度严重超标',
    latestAlertTime: '2024-03-20 19:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度严重超标',
    latestAlertTime: '2024-03-20 20:25',
    handleStatus: '0',
  },
  {
    alertGrade: 'WARN',
    alertContent: '四氯化碳浓度严重超标',
    latestAlertTime: '2024-03-20 21:25',
    handleStatus: '0',
  },
]
watch(
  () => alertGroup.value,
  async (newval) => {
    // listData.value = await getAllAlertData();
    console.log(newval);
    if (newval.length > 0) {

      switch (newval) {
        case "ERROR":
          // 过滤出告警等级为ERROR
          listData.value = arr.filter(item => {
            return item.alertGrade == "ERROR"
          })
          break;
        case "WARN":
          listData.value = arr.filter(item => {
            return item.alertGrade == "WARN"
          })
          break;
      }
    }
    else {

      listData.value = arr
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.realTime-alarms {
  width: 100%;
  height: 100%;
  position: relative;

  .realTime-ala-loading {
    position: absolute;
    width: 100%;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .realTime-table-a {
    width: 100%;
    position: absolute;
  }
}
</style>
